<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="__CSS__/weuix.min.css"/>
    <script src="__JS__/zepto.min.js"></script>
    <script src="__JS__/lrz.min.js"></script>
</head>

<body ontouchstart style="background-color: #f8f8f8;">

<div class="weui_cells weui_cells_form">

    <div class="weui_cell">
        <div class="weui_cell_bd weui_cell_primary">
            <div class="weui_uploader">
                <div class="weui_uploader_hd weui_cell">
                    <div class="weui_cell_bd weui_cell_primary">单寸照</div>
                    <div class="weui_cell_ft"></div>
                </div>
                <div class="weui_uploader_bd">
                    <ul class="weui_uploader_files" id='img'>

                    </ul>
                    <div class="weui_uploader_input_wrp">
                        <input class="weui_uploader_input" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" id="headimgurl" />
                        <input  type="hidden"  id="headimgurl1" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script>

    $(function(){


        var f = document.querySelector('#headimgurl');
        f.onchange = function () {
            lrz(this.files[0],{width:640,fieldName:"file"}).then(function (rst) {
                var xhr = new XMLHttpRequest();
                xhr.open('POST', 'up1');

                xhr.onload = function () {
                    if (xhr.status === 200) {
                        var obj = eval('(' + xhr.responseText + ')');
                        $('#img').html('<li onclick="var delimg=$(this);$.confirm(\'您确定要删除吗?\', \'确认删除?\', function() {delimg.remove();},function(){$.toast(\'取消操作\', \'cancel\');});" class="weui_uploader_file weui_uploader_status" style="background-image:url('+obj.src+')"><div class="weui_uploader_status_content"><i class="weui_icon_cancel"></i></div></li>');
                        $("#headimgurl1").val(obj.src);
                    } else {
                        // 处理其他情况
                    }
                };

                xhr.onerror = function () {
                    // 处理错误
                };

                xhr.upload.onprogress = function (e) {
                    // 上传进度
                    var percentComplete = ((e.loaded / e.total) || 0) * 100;
                };
                // 添加参数
                rst.formData.append('size', rst.fileLen);
                rst.formData.append('base64', rst.base64);
                // 触发上传
                xhr.send(rst.formData);

                return rst;
            })
                    .catch(function (err) {
                        alert(err);
                    })
                    .always(function () {
                        // 不管是成功失败，这里都会执行
                    });
        }

    })

</script>

</body>
</html>
